<template>
 
  <div class="cell">
    <div class="author">
      <a href="#">
         <img :src="item.author.avatar_url"/>
      </a>
    </div>
    <p class="put_top" v-show="item.good">置顶</p>
    <div class="info">
      <p class="topic_title_wrap">
        <router-link :to="'/topic/'+item.id">{{item.title}}</router-link>
      </p>
      <div class="info_num">
        <p class="reply_count">
          <span class="count_of_replies" title="回复数"> {{item.reply_count}}  </span>
          <span class="count_seperator">/</span>
          <span class="count_of_visits" title="点击数"> {{item.visit_count}}</span>
        </p>
        <p class="last_active_time">{{item.create_at | Time}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import "dayjs/locale/zh-cn"
import relativeTime from "dayjs/plugin/relativeTime"
dayjs.locale('zh-cn')
dayjs.extend(relativeTime)

export default {
    props:['item'],
    filters:{
        Time(value){
            return dayjs().to(dayjs(value))
        }
    }
}
</script>
<style lang="scss" scoped>
.cell{
  height: .5rem;
  padding: .06rem .11rem 0 .1rem;
  border-bottom: 1px solid #ccc;
  display: flex;
  font-size: .14rem;
  
  .author{
    width: .3rem;
    height: .3rem;
    border-radius: .03rem;
    margin-right: .1rem;
    img{
      width: .3rem;
      height: .3rem;
    }
  }
  .put_top{
    flex-shrink: 0;
      background: #80bd01;
      padding: 2px 4px;
      border-radius: 3px;
      color: #fff;
      font-size: 12px;
      height: .18rem;
      margin-right: 0.02rem;
      margin-top: .04rem;
  }
  .info{
    flex:1;
    margin-top: .04rem;
    .topic_title_wrap{
      width: 2.84rem;
      a{
        display: inline-block;
        max-width: 70%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color:#333;
      }
    }
    .info_num{
      font-size: .12rem;
      display: flex;
      justify-content: space-between;
      color: #333;
      .count_of_replies{
        color:#9e78c0;
      }
      .count_seperator{
        margin: 0 4px;
      }
      .count_of_visits{
        color: #b4b4b4;
      }
    }
    
  }

}

</style>